@import "normalize"; // api: https://github.com/necolas/normalize.css/
@import "util"; // 站点变量
@import "base";

.page_main {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.fz {
  &-w {
    font-weight: bold;
  }

  &-14 {
    @include fontSize(14);
  }

  &-16 {
    @include fontSize(16);
  }

  &-20 {
    @include fontSize(20);
  }
}

.bd {
  border: 1px solid #ddd;

  &-t {
    border-top: 1px solid #ddd;
  }

  &-b {
    border-bottom: 1px solid #ddd;
  }

  &-l {
    border-left: 1px solid #ddd;
  }

  &-r {
    border-right: 1px solid #ddd;
  }
}

.mg5 {
  @include mg(5px);
}

.mg10 {
  @include mg(10px);
}

.mg20 {
  @include mg(20px);
}

.pd5 {
  @include pd(5px);
}

.pd10 {
  @include pd(10px);
}

.pd20 {
  @include pd(20px);
}

.lighter {
  color: tint($color, 20%);

  &-2 {
    color: tint($color, 40%);
  }

  &-3 {
    color: tint($color, 60%);
  }

  &-4 {
    color: tint($color, 80%);
  }
}

.darker {
  color: shade($color, 20%);

  &-2 {
    color: shade($color, 40%);
  }

  &-3 {
    color: shade($color, 60%);
  }

  &-4 {
    color: shade($color, 80%);
  }
}
.align {
  &-l {
    text-align: left;
  }

  &-r {
    text-align: right;
  }

  &-c {
    text-align: center;
  }

  &-j {
    text-align: justify;
  }
}

.ellipsis {
  min-width: 0;
  @include ellipsis;
}

.mg5 {
  @include mg(5px);
}

.mg10 {
  @include mg(10px);
}

.mg15 {
  @include mg(15px);
}

.mg20 {
  @include mg(20px);
}

.mg30 {
  @include mg(30px);
}

.mg40 {
  @include mg(40px);
}

.pd0 {
  padding: 0.1px;
}

.pd5 {
  @include pd(5px);
}

.pd10 {
  @include pd(10px);
}

.pd15 {
  @include pd(15px);
}

.pd20 {
  @include pd(20px);
}

.pd30 {
  @include pd(30px);
}

.pd40 {
  @include pd(40px);
}

.pointer {
  cursor: pointer;
}

@mixin creatColor($color) {
  color: $color;

  &.el-button--text:hover,
  &.el-button--text:focus {
    color: tint($color, 20%);
  }

  &.el-button--text:active {
    color: shade($color, 10%);
  }
}

.color {
  &-primary {
    @include creatColor($primary);
  }

  &-light {
    @include creatColor($light);
  }

  &-darkblue {
    @include creatColor($darkblue);
  }

  &-blue {
    @include creatColor($blue);
  }

  &-red {
    @include creatColor($red);
  }

  &-pruple {
    @include creatColor($pruple);
  }

  &-yelllow {
    @include creatColor($yelllow);
  }

  &-e {
    color: #eee;
  }

  &-c {
    color: #ccc;
  }

  &-dark6 {
    color: $dark6;
  }

  &-dark9 {
    color: $dark9;
  }
}

.vtc {
  &-t {
    vertical-align: top;
  }

  &-m {
    vertical-align: middle;
  }

  &-b {
    vertical-align: bottom;
  }
}

.font-size3 {
  font-size: 3 * $baseFont;
}

.font-size4 {
  font-size: 4 * $baseFont;
}

.font-size5 {
  font-size: 5 * $baseFont;
}

.font-size6 {
  font-size: 6 * $baseFont;
}

.font-size7 {
  font-size: 7 * $baseFont;
}

.font-size8 {
  font-size: 8 * $baseFont;
}

.font-size9 {
  font-size: 9 * $baseFont;
}

.font-size10 {
  font-size: 10 * $baseFont;
}

.font-size11 {
  font-size: 11 * $baseFont;
}

.font-size12 {
  font-size: 12 * $baseFont;
}

.font-weight {
  font-weight: bold;
}

.w600 {
  width: 600px !important;
}

.w500 {
  width: 500px !important;
}

.w420 {
  width: 420px !important;
}

.w240 {
  width: 240px !important;
}

.w200 {
  width: 200px !important;
}

.w180 {
  width: 180px !important;
}

.w160 {
  width: 160px !important;
}

.w140 {
  width: 140px !important;
}

.w120 {
  width: 120px !important;
}

.w110 {
  width: 110px !important;
}

.w100 {
  width: 100px !important;
}

.wb100 {
  width: 100% !important;
}

.wb70 {
  width: 70% !important;
}

.wb20 {
  width: 20% !important;
}

.radius {
  border-radius: 4px;
}

.bd {
  border: 1px solid $borderColor;

  &-t {
    border-top: 1px solid $borderColor !important;
  }

  &-l {
    border-left: 1px solid $borderColor;
  }

  &-r {
    border-right: 1px solid $borderColor;
  }

  &-b {
    border-bottom: 1px solid $borderColor;
  }
}

.flex {
  display: flex;

  &-co {
    flex-direction: column;
  }

  &-b {
    justify-content: space-between;
  }

  &-c {
    align-items: center;
  }
}
.shrink {
  @include shrink;
}
.grow {
  @include grow;
}
.inb {
  display: inline-block;

  &-m {
    display: inline-block;
    vertical-align: middle;
  }

  &-t {
    display: inline-block;
    vertical-align: top;
  }

  &-b {
    display: inline-block;
    vertical-align: bottom;
  }
}

.fl {
  float: left;
}

.flr {
  float: right;
}

/* global */

.pagination {
  background-color: #fff;
  @include flex(center, flex-end);
  padding-top: 15px;
}

.tox-silver-sink {
  z-index: 10000 !important;
}

//  global reset btn
.reset-btn {
  color: #409eff;
  border: 1px solid #409eff;
}